<template>
    <el-form-item label="频道"  prop="ChannelId">
        <el-select
        v-model="channelId"
        @change="hChange"
        placeholder="请选择频道">
          <el-option
          v-for="channel in channelList"
          :key="channel.id"
          :label="channel.name"
          :value="channel.id"></el-option>
        </el-select>
      </el-form-item>
</template>
<script>
export default {
  name: 'Channel',
  props: ['value'],
  data () {
    return {
      channelId: this.value,
      channelList: []
    }
  },
  created () {
    this.loadChannel()
  },
  watch: {
    value (newVal, oldVal) {
      console.log(Date.now(), 'value....', newVal, oldVal)
      this.channelId = this.value
    }
  },
  methods: {
    async loadChannel () {
      // 获取频道数据
      const result = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/channels'
      })
      console.log('频道数据', result)
      this.channelList = result.data.data.channels
    },
    hChange () {
      this.$emit('input', this.channelId)
    }

  }
}
</script>
